<!-- 基础列表页 -->
<template>
  <!-- 详情页 -->
  <router-view v-if="url === '/list/base/detail'"></router-view>
  <div v-else class="base-wapper bg-wt">
    <!-- 筛选区域 -->
    <searchFormBox
      @handleSearch="handleSearch"
      @handleReset="handleReset"
      @handleChangeAppId="handleChangeAppId"
      @handleAddCategoryShow="handleAddCategoryShow"
      @handleCategorySortShow="handleCategorySortShow"
    ></searchFormBox>
    <!-- end -->
    <!-- 表格 -->
    <tableList
      v-for="item in processCategoryList"
      :key="item.id"
      :categoryId="item.id"
      :appId="appId"
      :isSearch="isSearch"
      :categoryName="item.name"
      :queryKeyword="keyword"
      @handleSetupContract="handleSetupContract"
      @handleBulid="handleBulid"
      @handleClickStatus="handleClickStatus"
      @handleClickDelete="handleClickDelete"
      @handleUpdateProcessCategory="handleUpdateProcessCategory"
      @handleDeleteProcessCategory="handleDeleteProcessCategory"
    ></tableList>
    <div v-if="processCategoryList.length === 0" class="empty-tip">
      当前没有任何数据，你可以从新增一个分组开始添加数据
    </div>
    <!-- end -->
    <!-- end -->
    <!-- 生产环境禁用操作弹窗 -->
    <ProdDisabled
      :confirm-visible="prodDisabledVisible"
      @handleClose="handleClose"
    ></ProdDisabled>
    <!-- end -->
    <!-- 删除弹层 -->
    <Delete
      :dialog-delete-visible="dialogDeleteVisible"
      :delete-text="deleteText"
      @handle-delete="handleDelete"
      @handle-close="handleClose"
    ></Delete>
    <!-- end -->
    <!-- 启用或停用 -->
    <Delete
      :header-title="statusHeader"
      :dialog-delete-visible="dialogStatusVisible"
      :delete-text="statusText"
      @handle-delete="handleStatus"
      @handle-close="handleClose"
    ></Delete>

    <!-- 删除分类 -->
    <Delete
      :header-title="delCategoryHeader"
      :dialog-delete-visible="dialogDelCategoryVisible"
      :delete-text="delCategoryText"
      @handle-delete="handleDeleteProcessCategoryAction"
      @handle-close="handleClose"
    ></Delete>
    <!-- 新增或修改分类 -->
    <DialogCategory
      :visible="visibleCategory"
      :title="titleCategory"
      :app-id="appId"
      :data="CategoryFormData"
      @handleClose="handleCloseDialog"
      @fetchCategoryData="fetchCategoryData"
    />
    <!-- end -->
    <!-- 排序分类 -->
    <DialogCategorySort
      ref="dialogCategorySort"
      title="排序"
      :visible="visibleSort"
      :app-id="appId"
      :list="processCategoryList"
      @handleCloseSort="handleCloseSort"
    />
    <!-- end -->
  </div>
</template>

<script lang="ts">
export default {
  name: 'ListBase',
  components: { tableList, searchFormBox,DialogCategorySort }
}
</script>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { ref, onMounted, watch } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
import ProdDisabled from '@/components/Message/ProdDisabled.vue' // 删除弹窗
import Delete from '@/components/Delete/index.vue' // 删除弹层
import tableList from './components/TableList.vue' // 表格
import searchFormBox from './components/SearchForm.vue'
import DialogCategory from './components/DialogCategory.vue'
import DialogCategorySort from './components/DialogCategorySort.vue'
import {saveSystemUser } from "@/api/systemuser";
import {delProcess, delProcessCategory, getProcessCategoryList } from "@/api/process"; // 搜索框表单
const appId = ref()

const dialogDelCategoryVisible = ref(false) // 控制启用或停用
const delCategoryText = ref('确定要删除分类吗？') // 启用或停用的内容
const delCategoryHeader = ref('提示') // 启用或停用的内容

const visibleSort = ref(false) // 新增，编辑弹窗

const visibleCategory = ref(false) // 新增，编辑弹窗
const CategoryFormData = ref({}) // 弹窗表单内容
const titleCategory = ref('新建') // 弹窗标题
const handleAddCategoryShow = () => {
  CategoryFormData.value = {}
  visibleCategory.value = true
}
const dialogCategorySort = ref()
const handleCategorySortShow = () => {
  visibleSort.value = true
}

const handleCloseSort = (isUpdate) => {
  visibleSort.value = false
  if (isUpdate) {
    fetchCategoryData()
  }
}

// 删除分类
const deleteCategoryId = ref()
const handleDeleteProcessCategory = (val) => {
  dialogDelCategoryVisible.value = true
  deleteCategoryId.value = val
}
const handleDeleteProcessCategoryAction = async (val) => {
  if (appId.value) {
    const params = {
      id: 'PROCESSS_CATEGORY_DELETE',
      palyload: {
        id: deleteCategoryId.value,
        userAppId: appId.value
      }
    }
    const res: any = await delProcessCategory(params)
    if (res.success) {
      MessagePlugin.success('删除成功')
      fetchCategoryData()
      handleCloseDialog()
    } else {
      handleCloseDialog()
      MessagePlugin.error(res.errorMessage)
    }
  }
}
// 修改分类名称
const handleUpdateProcessCategory = (val) => {
  CategoryFormData.value = {
    id: val.categoryId,
    name: val.categoryName
  }
  visibleCategory.value = true
}
const handleCloseDialog = () => {
  visibleCategory.value = false
  dialogDelCategoryVisible.value = false
}

const visible = ref(false) // 新增，编辑弹窗
const DialogFormdata = ref({}) // 弹窗表单内容
const title = ref('新建') // 弹窗标题
const dialogStatusVisible = ref(false) // 控制启用或停用
const statusText = ref('确定要此操作吗？') // 启用或停用的内容
const statusHeader = ref('提示') // 启用或停用的内容
const dialogDeleteVisible = ref(false) // 控制删除弹层显示隐藏
const deleteText = ref('此操作将永久删除这条信息，是否继续？') // 删除的内容
const prodDisabledVisible = ref(false) // 生产环境禁用操作弹窗
const route = useRoute()
const url = ref('')

// 搜索框表单
const searchForm = {
  index: '',
  status: undefined,
  serviceCallNumber: undefined,
  updateTime: []
}
// 监听路由变化
watch(
  () => route.path,
  (newValue) => {
    url.value = newValue
    // fetchData(pagination.value)
  }
)
const formData = ref({ ...searchForm }) // 表单内容

// 加载app对应的数据
const handleChangeAppId = (val) => {
  appId.value = val
  CategoryFormData.value = { ...appId.value }
  fetchCategoryData()
}
const processCategoryList = ref([])
const fetchCategoryData = async () => {
  if (appId.value) {
    const params = {
      id: 'PROCESSS_CATEGORY_LIST',
      palyload: {
        userAppId: appId.value
      }
    }
    const res: any = await getProcessCategoryList(params)
    if (res.success) {
      processCategoryList.value = res.data.result.data
    } else {
      MessagePlugin.error(res.errorMessage)
    }
  }
}
// 生命周期
onMounted(() => {
  fetchCategoryData()
})
// 搜索功能
const keyword = ref()
const isSearch = ref(false)
const handleSearch = (val) => {
  // 根据搜索框的内容进行搜索
  keyword.value = val
  if (keyword.value) {
    isSearch.value = true
  } else {
    isSearch.value = false
  }
}
// 重置，清空搜索框
const handleReset = () => {
  // 清空搜索框的全部内容并且重新获取数据
  // 重置页码
}
// 关闭弹窗
const handleClose = () => {
  visible.value = false // 关闭新增弹窗
  dialogDeleteVisible.value = false // 关闭删除弹层
  prodDisabledVisible.value = false
  dialogStatusVisible.value = false
  dialogDelCategoryVisible.value = false
}
// 点击新建
const handleBulid = () => {
  // // 显示新建弹窗
  visible.value = true
  // 将弹窗的标题改为新建
  title.value = '新建'
  DialogFormdata.value = { status: 1 }
}
// 点击编辑
const handleSetupContract = (val) => {
  // 深拷贝
  DialogFormdata.value = JSON.parse(JSON.stringify(val))
  console.log(DialogFormdata.value)
  // 显示新建弹窗
  visible.value = true
  // 将弹窗的标题改为新建
  title.value = '编辑'
}
const status = ref()
// 点击启用或停用
const handleClickStatus = (val, st) => {
  // 显示提示弹窗
  dialogStatusVisible.value = true
  statusText.value = `确定要${st === 0 ? '停用' : '启用'}吗？`
  status.value = { id: val.id, status: st }
}
const handleStatus = async () => {
  const params = {
    id: 'SYSTEM_USER_ADD_OR_UPDATE',
    palyload: {
      ...status.value
    }
  }
  const res: any = await saveSystemUser(params)
  if (res.success) {
    MessagePlugin.success('操作成功')
    dialogStatusVisible.value = false
  } else {
    MessagePlugin.error(res.errorMessage)
  }
}
const deleteDataId = ref()
const callback = ref()
// 确认删除
const handleDelete = async () => {
  const params = {
    id: 'PROCESS_MODEL_DELETE',
    palyload: {
      id: deleteDataId.value
    }
  }
  const res: any = await delProcess(params)
  dialogDeleteVisible.value = false
  if (res.success) {
    if (callback.value) {
      // 回调算下
      callback.value()
    }
    MessagePlugin.success('删除成功')
  } else {
    MessagePlugin.error(res.errorMessage)
  }
}
// 点击删除
const handleClickDelete = (row, cback) => {
  callback.value = cback
  dialogDeleteVisible.value = true
  deleteDataId.value = row.id
}
</script>
<style lang="less" scoped src="./index.less"></style>
